



// 固定导航
$(window).on('scroll', function () {
    if ($(window).scrollTop() >= 743) {
        $('.fixheader').css('display', 'block');
        $('.fixheader').css('z-index', '3');
        $('.fixheader').animate({
            'height': "53px"
        })

    } else {
        $('.fixheader').css('display', 'none');
        $('.fixheader').css('z-index', '');
    }
})

// 购物车

$('.shop').hover(function(){
    $('.emptyshop').css('display','block');
    $('.shop').css('border-bottom','0');
      $('.emptyshop').mouseover(function () {
             $('.shop').css('border-bottom','0');
        $(this).css('display', 'block');})
},function(){
      $('.emptyshop').css('display','none');
          $('.shop').css('border-bottom','');
       $('.emptyshop').mouseout(function () {
        $(this).css('display', 'none');
        $('.shop').css('border-bottom','');
})
       
})
// 导航1
$('#beijing').hover(function () {
    $('#position').css('display', 'block');
    $('#position').mouseover(function () {
        $(this).css('display', 'block');
        $('#beijing').css('background-color', 'white');
    })
}, function () {
    $('#position').css('display', 'none');
    $('#position').mouseout(function () {
        $(this).css('display', 'none');
        $('#beijing').css('background-color', '');
    })
})
$('#myjingdong').hover(function () {
    $('#myjingdong1').css('display', 'block');

}, function () {
    $('#myjingdong1').css('display', 'none');
    $('#myjingdong1').hover(function () {
        $('#myjingdong').css('background-color', 'white');
        $('#myjingdong1').css('display', 'block');
    }, function () {
        $('#myjingdong1').css('display', 'none');
        $('#myjingdong').css('background-color', '');

    });
})
$('#kehufuwu').hover(function () {
    $('#fuwu').css('display', 'block');
}, function () {
    $('#fuwu').css('display', 'none');
    $('#fuwu').hover(function () {
        $('#kehufuwu').css('background-color', 'white');

        $('#fuwu').css('display', 'block');
    }, function () {
        $('#fuwu').css('display', 'none');
        $('#kehufuwu').css('background-color', '');

    });
})
$('#wangzhandaohang').hover(function () {
    $('#wangzhan').css('display', 'block');
}, function () {
    $('#wangzhan').css('display', 'none');
    $('#wangzhan').hover(function () {
        $('#wangzhandaohang').css('background-color', 'white');
        $('#wangzhan').css('display', 'block');
    }, function () {
        $('#wangzhandaohang').css('background-color', '');
        $('#wangzhan').css('display', 'none');
    });
})

$(' #position span').hover(function () {
    $(this).css('color', 'red');
}, function () {
    $(this).css('color', 'black');
});


$('#shoujijingdong').hover(function () {
    $('#shouji').css('display', 'block');
}, function () {
    $('#shouji').css('display', 'none');
    $('#shouji').hover(function () {
        $('#shouji').css('display', 'block');
        $('#shoujijingdong').css('background-color', 'white');

    }, function () {
        $('#shouji').css('display', 'none');
        $('#shoujijingdong').css('background-color', '');

    });
})
$('.erer').hover(function () {
    $('#shouji').css('display', 'block');
}, function () {
    $('#shouji').hover(function () {
        $('#shouji').css('display', 'none');
        $('#shouji').css('display', 'block');
    }, function () {
        $('#shouji').css('display', 'none');
    });
})
$('#blue1').hover(function () {
    $("#blue2").finish().animate({
        width: '990px'
    });
}, function () {
    $("#blue2").finish().animate({
        width: '0px'
    })
})
$('.contain span').eq(1).hover(function () {
    $(' .contain  hr').animate({
        left: '45px'
    });
    $('.infor').empty().html(`
           <p>京东扶贫频道正式上线运营</p>
            <p>京东全球售升级 新域名同步启用</p>
            <p>京东会员体系全新升级</p>
            <p>《京东隐私政策》修改公告</p>
            `);
})
$('.contain span').eq(0).hover(function () {
    $(' .contain  hr').animate({
        left: '0px'
    })
    $('.infor').empty().html(`
                 <p>索粉节！为信仰低至6折！</p>
                <p>品质家纺跨店2件8折</p>
                <p> 家纺自营满199减100</p>
                <p> 万件好物1元秒</p>
            `);
})
// 登陆成功
var petname = $.cookie('username');
if (petname) {
    $('#name ').empty().html(
        ` <a href="javascript:;">${petname} <span class='glyphicon glyphicon-chevron-down'></span></a>`
    )
    $('#name').css('margin-left', '244px');
    $('.logo').empty().html(`
              <img src="./img/no_login.jpg" alt="" class="head"><span>Hi，${petname} <p class='bg-red ' > 
              <img src="./img/jiantou.png" alt="" class='jiantou'>88888</p> <a href="/api/user/signout">退出</a> </span>
            <div class="button2"><button>您可享金牌特惠，开通PLUS</button></div>
            `);

      $('.petname').html(`
     <div> <img src="./img/no_login.jpg" alt="" class="head">
      <span>Hi，${petname} 
        &nbsp;  <a href="/api/user/signout">退出</a>
          <p>您可享金牌特惠，开通PLUS&gt;</p> </span>
          <hr class='hr2'></div>
          <div class='smalllunbo'>
         <div class='imgBox' >
           <img src="./img/tu1.png" alt="">
                    <img src="./img/tu2.png" alt="">
                    <img src="./img/tu5.png" alt="">
                    <img src="./img/tu3.png" alt="">
                    <img src="./img/tu4.png" alt="">
         </div>
           <div class="buttons">
                    <span id="prev">&lt;</span>
                    <span id="next">&gt;</span>
                </div>
          </div>
          `);   
          $('#name').hover(function(){
    $('.petname').css('display','block');
       $('.petname').mouseover(function () {
               $('.petname').css('display','block');
       })
},function(){
 $('.petname').css('display','none');
   $('.petname').mouseout(function () {
    $('.petname').css('display','none');
       })
})   
    $('#mainfei').remove();
} else {
    $('#name a').empty().html(
        '你好，请登录'
    )
    $('.logo').empty().html(`
             <img src="./img/no_login.jpg" alt="" class="head"><span>Hi，欢迎来到京东！登录 注册</span>
            <div class="button2"><button>新人福利</button><button>PLUS会员</button></div>
            `);
    $('#mainfei').html(`<a href="register.html">免费注册</a></li>`);
}


// 渲染左侧数据
for (var i = 0; i < arr[0].length; i++) {
    $('.left').append(`
      <p></p> 
    `);
    for (var j = 0; j < arr[0][i].length; j++) {
        $('.left p').eq(i).append(`<span>&nbsp;</span><a href='${arr[0][i][j].link}'>${arr[0][i][j].text}</a> <span>&nbsp;/</span>`);
    }
}
$(".left p").find('span:last').remove();



// 渲染中间数据
$('.left').find('p').on({
    mousemove: function () {
        $('.clickleft').css('display', 'block');
        $('.clickheader').empty();
        arr[1][$(this).index()].catePartL.channel.forEach(function (item) {
            $('.clickheader').append(`
                    <a href='${item.link}'>${item.text}&nbsp;></a>
               `)
        });
        $('.clickbody').empty();
        arr[1][$(this).index()].catePartL.detail.forEach(function (item, index) {
            $('.clickbody').append(`
                    <p><a href='#' class=title>${item.tit.text}&nbsp;></a><span id=${index} class='block'></span></p>
                    `)
            item.con.forEach(function (item) {
                $(`#${index}`).append(`
                           <span>|</span> <a href='${item.link}'>${item.text}</a>
                        `)
            })
        })
        $('.topheader').empty();
        arr[1][$(this).index()].catePartR.brand.forEach(function (item) {
            $('.topheader').append(`
                    <a href='${item.link}'><img src='${item.img}'></a>
               `)
        });

        $('.bottombody').empty();
        arr[1][$(this).index()].catePartR.promo.forEach(function (item) {
            $('.bottombody').append(`
                    <a href='${item.link}'><img src='${item.img}'></a>
               `)
        });
        if ($(this).index() == 7 || $(this).index() == 12) {
            $('.clickleft').css('height', '510px');
        } else {
            $('.clickleft').css('height', '480px');
        }
    }, mouseout: function () {
        $('.clickleft').css('display', 'none');
        $('.clickleft').hover(function () {
            $('.clickleft').css('display', 'block');
        }, function () {
            $('.clickleft').css('display', 'none');
        });
    }
})


// 秒杀红条下轮播
var AllArr = [];
var Arr1 = [];
var Arr2 = [];
var Arr3 = [];
var Arr4 = [];
miaoshaArr[0].bd.skitems.forEach(function (item, index) {
    if ((index + 1) <= 5) {
        Arr1.push(item);
    }
    else if ((index + 1) > 5 && (index + 1) <= 10) {
        Arr2.push(item);
    }
    else if ((index + 1) > 6 && (index + 1) <= 15) {
        Arr3.push(item);
    }
    else {
        Arr4.push(item);
    }
    $('.leftcontent11 ul').append();
})
AllArr.push(Arr1);
AllArr.push(Arr2);
AllArr.push(Arr3);
AllArr.push(Arr4);
for (var i = 0; i < AllArr.length; i++) {
    var str = '';
    for (var j = 0; j < AllArr[i].length; j++) {
        str += `<li>
 <div class='miaoshablock'>
 <a href="${AllArr[i][j].link}"><img src="${AllArr[i][j].img}" alt=""></a>
 <p>${AllArr[i][j].text}</p>
 </div>
<p>￥${AllArr[i][j].price} <s>${AllArr[i][j].priceOrgin}</s></P>
 </li>`;
    }

    $('.swiper-slide').eq(i).html(str);
}
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30,
    loop: true
});
$('.miaoshablock a img').hover(function () {
    $(this).finish().animate({
        'top': '-10px'
    })
}, function () {
    $(this).finish().animate({
        'top': '0'
    })
})

//  发现好货
FindArr[0].boxBd.item.forEach(function (item) {
    $('.content2>div:nth-child(1) .fjb_con_bottom').append(`
 <li><a href="${item.link}"> 
   <p>${item.text}</p>
   <img src="${item.img}" alt="">
   </a></li>
    `);
})
$('.content2>div:nth-child(1) .fjb_con_bottom img').hover(function () {
    $(this).finish().animate({
        'left': '55px'
    })
}, function () {
    $(this).finish().animate({
        'left': '65px'
    })
})

// 会买专辑
var middlesourse = `
{{each item item1 index }}
<div class='sup-block'>
{{each item1 item2 index }}
<a href='{{item2.link}}'>
<p>{{item2.title}}</p>
{{each item2.imgs ele1 index }}
<img src='http:{{ele1}}' alt="" class='sup_img'>
{{/each}} 

</a>
{{/each}} 
</div>
{{/each}} 
`
var strHtml = template.render(middlesourse, supArr[0].boxBd);
$('.content2>div:nth-child(2) .imgBox').html(strHtml);

// 排行榜
var middlesourse1 = `
<p class='top'>
{{each title item1 index }}
<span><a href="{{item1.link}}">{{item1.text}}</a></span>
{{/each}}
<hr class='hr'>
</p>
<div>
{{each item item2 index }}
<div class='top-block'>
{{each item2 item3 index }}
<a href='{{item3.link}}' class='aa'>
<div class='top-rank'>
    <div class='top-pic'><img src='{{item3.img}}' alt=''></div>
    <p class='top-name'>{{item3.text}}</p>
</div>
</a>
{{/each}}
</div>
{{/each}}

</div>
`
var strHtml1 = template.render(middlesourse1, topArr[0].boxBd);
$('.content2>div:nth-child(3) .fjb_con_bottom1').html(strHtml1);
$('.top-rank .top-name').each(function (item) {
    if ($(this).html().length > 20) {
        var str = $(this).html().substr(0, 20);
        $(this).html(`${str}`);
    }
})
$('.miaoshablock p').each(function (item) {
    if ($(this).html().length > 50) {
        var str = $(this).html().substr(0, 50);
        $(this).html(`${str}`);
    }
})
$('.top-block').eq(0).addClass('showblock');
$('.top-block').eq(0).siblings().addClass('shownone');
$('.top span:last').css('border-right', 'none');
$('.top span').mouseover(function () {
    var index0 = $(this).index() * 68 + 35;
    $(' .hr').finish().animate({
        'left': index0 + 'px'
    }, 500)
    $('.top-block').eq($(this).index()).toggleClass('showblock').removeClass('shownone').siblings().removeClass('showblock').addClass('shownone');
})

// 领劵中心
var lingjuan = `
{{each item item1 index}}
<a hre='{{item1.link}}' class='aaa'><div class="Allcontent31">
<div class="leftcontent31">
<hr>
<div class="topcontent31">
<p class='price1'>￥{{item1.coupon.price}}</p>
<p class='desc1'>{{item1.coupon.desc}}</p>
</div>
<div class="bottomcontent31">
<p class='price1'>{{item1.coupon.limit}}</p>
</div>
<div class="redfooter31">{{item1.coupon.more}}</div>
</div>
<div class="rightcontent31"><img src='{{item1.img}}'>
</div>
</div>
</a>
{{/each}}
`;
var lingjuanstrHtml1 = template.render(lingjuan, quanArr[0].boxBd);
$('.leftcontent3 .fjb_con_bottom1').html(lingjuanstrHtml1);

$('.aaa img').finish().hover(function () {
    $(this).finish().animate({
        'left': '40px'
    })
}, function () {
    $(this).finish().animate({
        'left': '20px'
    })
})
// 觅ME
var findMe=`  
<div class='imgBox'>
{{each item item1 index}}
 <li>
    <a href="{{item1.link}}">
    <img src="{{item1.img}}" alt=""></a>
    <span class='mime_title'>{{item1.mine.title}}</span>
    <span class='mime_desc'>{{item1.mine.desc}}</span>
    <span class='mime_seen'>{{item1.mine.seen}}</span>
                </li>

      {{/each}} 
      </div>
                `;
var findMeHtml=template.render(findMe, findME[0].boxBd);
$('.rightcontent3 .fjb_con_bottom1 ').html(findMeHtml);

// 享品质左侧
var enjoy = `   
{{each $data item index}}      
               <div class="importantblock1">
              <img src='{{item.img}}' alt=''>
                        <div class="leftimportantblock1">
                            <hr>
                            <h3>{{item.title}}</h3>
                            <hr>
                            <p>{{item.desc}}</p>
                        </div>
                    </div>
                 {{/each}}   
                    
                    `;

var enjoyhtml = template.render(enjoy, entryArr);
$('.leftimportant1').html(enjoyhtml);
$('.importantblock1 img').hover(function () {
    $(this).finish().animate({
        'left': '-10px'
    })
}, function () {
    $(this).finish().animate({
        'left': '0'
    })
})
$('.leftimportantblock1').eq(0).css('background-color', 'rgba(114,187,142,0.8)');
$('.leftimportantblock1').eq(1).css('background-color', 'rgba(221,209,121,0.8)');
$('.leftimportantblock1').eq(2).css('background-color', 'rgba(91,84,101,0.8)');
$('.leftimportantblock1').eq(3).css('background-color', 'rgba(72,140,148,0.8)');
$('.leftimportantblock1').eq(4).css('background-color', 'rgba(215,142,139,0.8)');
$('.leftimportantblock1').eq(5).css('background-color', 'rgba(134,99,79,0.8)');
//享品质右侧
var enjoy1 = `   
{{each $data item index}}      
               <div class="rightimportant1bottom1">
              <img src='{{item.img}}' alt=''>
                        <div class="fixrightimportantblock1">
                            <hr>
                            <h3>{{item.title}}</h3>
                            <hr>
                            <p>{{item.desc}}</p>
                        </div>
                    </div>
                 {{/each}}   
                    
                    `;

var enjoyhtml1 = template.render(enjoy1, enjoyArr1);
$('.rightimportant1bottom').html(enjoyhtml1);
$('.rightimportant1bottom img').hover(function () {
    $(this).finish().animate({
        'left': '-10px'
    })
}, function () {
    $(this).finish().animate({
        'left': '0'
    })
})
$('.fixrightimportantblock1').eq(0).css('background-color', 'rgba(175,72,65,0.8)');
$('.fixrightimportantblock1').eq(1).css('background-color', 'rgba(109,52,109,0.8)');

//爱生活
console.log(gridItemArr);
var gridItem = `   
{{each $data item index}}
                <div class="leftsignificant1block " id='ai{{index}}'>
                    <div class="significantheader">
                        <span style="font-size:24px;">{{item.title}}</span>
                      {{each item.tags item1 index1}}
                        <a href="{{item1.link}}">{{item1.text}}</a>
                        {{/each}}        
                    </div>
<div class=' tanxing'>
 {{each item.body item4 index4}}
 <div class='bg-white'>
      <div class="bodysignificant1block">
            <div class="leftleftsignificant1block">
                  <a href='{{item4.cover.link}}'>
                    <img src='{{item4.cover.img}}' alt=''>
                  </a>
            </div>
      <div class="rightleftsignificant1block">
         {{each item4.pbi item3 index3}}
        <div class="smallbody">
           <li>
             <a href="{{item3.link}}" class='ahover'> 
                 <div class='twop1'>
                 <h5>{{item3.title}}</h5>
                 <p>{{item3.promo}}</p>
                 </div>
                 <img src="{{item3.img}}" alt="">
             </a>
            </li>   
        </div>
        {{/each}}
       </div>
         </div>
                    <div class="bottomleftsignificant1block">
                    {{each item4.more item6 index6}}
                    <div class="smallbottom">
                      <li><a href="{{item6.link}}"> 
                                <img src="{{item6.img}}" alt="">
                                </a>
                    </div>
                    {{/each}}
                    </div>
                    </div>
        {{/each}}
    </div>
                    <div class="bottomleftsignificant1blocklun">
                    {{each item.foot item5 index5}}
                        <li><a href="{{item5.link}}"> 
                                <img src="{{item5.img}}" alt="">
                                </a>
                    {{/each}}
                    </div>
                </div>
            </div>
  {{/each}}    
                    `;

var gridItemhtml = template.render(gridItem, gridItemArr);
$('.significant1').html(gridItemhtml); 
$('.leftleftsignificant1block img').hover(function () {
    $(this).finish().animate({
        'left': '-10px'
    })
}, function () {
    $(this).finish().animate({
        'left': '0'
    })
})
  
$('.smallbody img').hover(function () {
    $(this).finish().animate({
        'left': '-4px'
    })
}, function () {
    $(this).finish().animate({
        'left': '0'
    })
})
 $('.smallbottom img').hover(function () {
    $(this).finish().animate({
        'left': '-4px'
    })
}, function () {
    $(this).finish().animate({
        'left': '0'
    })
}) 

$('.significantheader').eq(1).css('background-color','#ca3559');
$('.significantheader').eq(2).css('background-color','#734d8b');
$('.significantheader').eq(3).css('background-color','#59688f');
$('.significantheader').eq(4).css('background-color','#4488a7');
$('.significantheader').eq(5).css('background-color','#34a6a4');
$('.significantheader').eq(6).css('background-color','#518a78');
$('.significantheader').eq(7).css('background-color','#ecb227');
$('.significantheader').eq(8).css('background-color','#e3653d');
$('.significantheader').eq(9).css('background-color','#a0643f');
$('.significantheader').eq(10).css('background-color','#705951');
$('.significantheader').eq(11).css('background-color','#844d4d');
$('.significantheader').eq(12).css('background-color','#5e5d9a');
$('.significantheader').eq(13).css('background-color','#536c52');
$('.significantheader').eq(14).css('background-color','#4f7799');
$('.significantheader').eq(15).css('background-color','#6f872b');

$('#ai7').css('margin-top','120px')

$('.neirong').eq(1).css('background-color', 'rgba(134,108,142,0.7)');
$('.neirong').eq(2).css('background-color', 'rgba(209,78,78,0.7)');
$('.neirong').eq(3).css('background-color', 'rgba(222,115,92,0.7)');
$('.neirong').eq(4).css('background-color', 'rgba(104,151,187,0.7)');
$('.neirong').eq(5).css('background-color', 'rgba(217,194,47,0.7)');
$('.neirong').eq(6).css('background-color', 'rgba(186,102,147,0.7)');
$('.neirong').eq(7).css('background-color', 'rgba(79,181,128,0.7)');

//还没逛够 
  var moregood=`
  {{each $data item index}}
  <li class="goublock">
                    <a href="{{item.link}}">
                  <img src="{{item.img}}" alt="">
                   <div class="picdibu">
                   <p class='juti'>{{item.info}}</p>
                   <p class="title1">{{item.price}}</p>
                    </div>
                    </a>
                </li>
    {{/each}}
  `;
var moregoodhtml = template.render(moregood, moregoodArr);
$('.haimeigouwan1').html(moregoodhtml);

$('.juti').each(function (item) {
    if ($(this).html().length > 30) {
        var str1 = $(this).html().substr(0, 30);
        $(this).html(`${str1}`);
    }   
})

// 右侧固定的区域定位

// $(window).on('scroll', function () {
//     var top=$(window).height()+$(document).scrollTop()-$('.iconblock').height();
//     console.log(top);
// $('.iconblock').css('top',top);
// })
$('.smallicon ').hover(function(){
       $('.smallicon1').eq($(this).index()).css('visibility','visible');
   $(this).css('background-color','red');
   $('.smallicon1').eq($(this).index()).animate(
     { 'right':'0px'});
},function(){
     $('.smallicon1').eq($(this).index()).css('visibility','hidden');
  $('.smallicon1').eq($(this).index()).animate(
     { 'right':'-97px'}
   )
   $(this).css('background-color','#7a6e6e');
})

$(window).on('scroll', function () {
    if ($(window).scrollTop() >= 1553) {
        $('#navbar-example').fadeIn();
          

    } else {
        $('#navbar-example').fadeOut();
    }
})


 $('img').each(function (index, item) {
            if (index >=141) {
                $(this).attr({
                    'xsrc': $(this).attr('src')
                });
                $(this).attr('src', './../img/lazyload@2x.gif')
            }
})

$(document).on('scroll', function () { 
     $('.yujiazai').each(function (index, item) {
                if ($(window).height() + $(document).scrollTop() >= $(this).offset().top) {
                    $(this).find('img').each(function (index, item) {
                        $(this).attr({
                            "src": $(this).attr('xsrc')
                        })
                    })
                }
            })
 });


$('table td').eq(0).mouseover(function(){
$('.table td').eq(0).css('border-top','3px solid red ');
$('.lvyou>table').css('display','none');
$('.kuaikuai').css('display','block');

})
$('table td').eq(1).mouseover(function(){
$('.lvyou>table').css('display','none');
$('.kuaikuai').css('display','block');
$('.table td').eq(1).css('border-top','3px solid red ');
})
$('table td').eq(2).mouseover(function(){
$('.lvyou>table').css('display','none');
$('.kuaikuai').css('display','block');
$('.table td').eq(2).css('border-top','3px solid red ');
})
$('table td').eq(3).mouseover(function(){
$('.lvyou>table').css('display','none');
$('.kuaikuai').css('display','block');
$('.table td').eq(3).css('border-top','3px solid red ');
})
console.log($(' .button1'));
$(' .button1').on('click',function(){
    $('.lvyou').html(`
     <table>
                    <tr>
                        <td class="huafei1">
                            <span class="lvyou1 huafei"></span>
                            <p>话费</p>
                        </td>
                        <td class="jipiao1">
                            <span class="lvyou1 jipiao"></span>
                            <p>机票</p>
                        </td>
                        <td class="jiudian1">
                            <span class="lvyou1 jiudian"></span>
                            <p>酒店</p>
                        </td>
                        <td class="youxi1">
                            <span class="lvyou1 youxi"></span>
                            <p>游戏</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="lvyou1 qiyegou"></span>
                            <p>企业购</p>
                        </td>
                        <td>
                            <span class="lvyou1 "></span>
                            <p>加油卡</p>
                        </td>
                        <td>
                            <span class="lvyou1 dianyingpiao"></span>
                            <p>电影票</p>
                        </td>
                        <td>
                            <span class="lvyou1 huochepiao"></span>
                            <p>火车票</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="lvyou1 zongchou"></span>
                            <p>众筹</p>
                        </td>
                        <td>
                            <span class="lvyou1 licai"></span>
                            <p>理财</p>
                        </td>
                        <td>
                            <span class="lvyou1 lipinka"></span>
                            <p>礼品卡</p>
                        </td>
                        <td>
                            <span class="lvyou1 baitiao"></span>
                            <p>白条</p>
                        </td>
                    </tr>
                </table>
    `);
})
